<template>
  <view id="main">
    <yz-bg themeBg> </yz-bg>
    <!-- 顶部搜索框 -->
    <yz-topBar showBack height="40">
      <template #center>
        <view class="search-box flex">
          <uni-icons @tap="search" type="search" color="#fff" size="24" />
          <input
            v-model="searchValue"
            placeholder="请输入关键词搜索"
            placeholder-style="color:#fff,font-size:14px"
            @confirm="search"
          />
        </view>
      </template>
    </yz-topBar>
    <!-- card :class="[woundedStore.TagStatus === 'TagStatus3' ? 'TagStatus3' : '']" -->
    <view @tap="handleScanCode" class="handle_card flex">
      <view class="card scan_code flex">
        <view class="scan_icon">
          <image class="medium_Icon" src="@/static/icon/scan-ticket.png" />
        </view>
        <view class="info">
          <view class="title fs_18 color_black">伤票扫码</view>
          <view class="text fs_14 color_gray">扫码定位伤员</view>
        </view>
      </view>
      <!-- <view v-if="woundedStore.TagStatus === 'TagStatus3'" class="card add flex">
        <view class="scan_icon">
          <image class="medium_Icon" src="@/static/icon/wounded-add.png" />
        </view>
        <view class="info">
          <view class="title fs_18 color_black">伤员新增</view>
          <view class="text fs_12 color_gray">伤员新增分配</view>
        </view>
      </view> -->
    </view>
    <!-- info -->
    <view class="content">
      <view class="info_title flex">
        <view class="fs_16 color_black">伤票信息</view>
      </view>
      <scroll-view @scrolltolower="scrolltolower" class="scroll" scroll-y>
        <view
          v-for="(item, index) in woundedStore.woundedList.List"
          :key="item.TagUuid"
          :class="[woundedStore.TagStatus]"
          class="card list_item"
          @tap="toHandleWounded(item.TagCode)"
        >
          <view class="tag top_tag fs_12"> 伤票码 </view>
          <view class="card_content">
            <view class="handle_box flex">
              <view class="code fs_17 color_black text_overflow">
                {{ item.TagCode }}
              </view>
              <view class="right_box flex">
                <view class="tag">
                  {{ item.TagStatusName }}
                </view>
                <uni-icons type="right" color="#8D8F9B" size="22" />
              </view>
            </view>
            <view class="info_box flex fs_12 color_gray">
              <view class="time flex">
                <view class="label">报告时间：</view>
                <view>{{ item.AddTime }}</view>
              </view>
              <view v-if="woundedStore.TagStatus === 'TagStatus3'" class="whereabouts flex">
                <view class="label"> 后送去向：</view>
                <view> {{ item.GoDestName || '--' }} </view>
              </view>
            </view>
          </view>
        </view>
        <view style="text-align: center" v-if="woundedStore.islower"> ... 加载中 ... </view>
      </scroll-view>
    </view>
  </view>
  <yz-tips v-if="toast.show" :title="toast.title"> </yz-tips>
</template>

<script lang="ts" setup>
import { useWoundedfzStore } from '@/stores/modules/woundedfz'
import { useHandleWoundedStore } from '@/stores/modules/handlewounded'
import { useToastStore } from '@/stores/modules/toast'
const toast = useToastStore()
const handleWoundedStore = useHandleWoundedStore()
import { onShow } from '@dcloudio/uni-app'
const woundedStore = useWoundedfzStore()
onShow(async () => {
  woundedStore.clearDate()
  await woundedStore.getWoundedList()
})
//滚动加载
const scrolltolower = async () => {
  await woundedStore.getWoundedList()
}
const searchValue = ref('') // 搜索框输入值
// 搜索
const search = () => {
  if (searchValue.value.trim() === '') {
    return
  }
  woundedStore.searchParam = searchValue.value
  woundedStore.isSearchPage = true
  woundedStore.pageNum = 1
  woundedStore.searchListData.searchList = []
  uni.navigateTo({
    url: `/pages/wounded/searchpage/searchpage`,
  })
  searchValue.value = ''
}
// 扫码定位伤员
const handleScanCode = async () => {
  uni.scanCode({
    success: async (res) => {
      const result = res.result
      console.log(result)
      handleWoundedStore.clearData()
      handleWoundedStore.TagCode = result
      switch (woundedStore.TagStatus) {
        case 'TagStatus1':
          uni.navigateTo({
            url: `/pages/wounded/handlewounded/handlewounded?TagCode=${result}&TagStatus1Scan=${'Scan'}`,
          })
          break
        case 'TagStatus2':
          await woundedStore.findWounded(result)
          uni.navigateTo({
            url: `/pages/wounded/handlewounded/handlewounded?TagCode=${result}`,
          })
          break
        case 'TagStatus3':
          await woundedStore.findWounded(result)
          uni.navigateTo({
            url: `/pages/wounded/handlewounded/handlewounded?TagCode=${result}`,
          })
          break
      }
    },
  })
}
// 跳转到处理伤员页面
const toHandleWounded = (TagCode: string) => {
  handleWoundedStore.TagStatus = woundedStore.TagStatus
  handleWoundedStore.clearData()
  uni.navigateTo({
    url: `/pages/wounded/handlewounded/handlewounded?TagCode=${TagCode}`,
  })
}
</script>

<style lang="scss" scoped>
#main {
  .search-box {
    margin-right: 12px;
    width: 300px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.2);
    padding-left: 10px;
    ::v-deep {
      .uni-input-placeholder {
        color: #ffffffbf;
      }
    }
    input {
      width: 95%;
    }
  }
  .handle_card {
    margin: 20px 0;
    justify-content: space-between;
    padding: 0 12px;
    // &.TagStatus3 {
    //   .card {
    //     width: 48% !important;
    //   }
    // }
    .card {
      padding: 20px 12px;
      width: 100%;
    }
    .scan_icon {
      margin-right: 8px;
      width: 36px;
      height: 36px;
      background: linear-gradient(90deg, rgb(15, 188, 204), rgb(11, 187, 203) 100%);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .info {
      display: flex;
      flex-direction: column;
    }
  }
  .content {
    padding: 0 12px;
    height: 390px;
    .scroll {
      height: calc(100% - 21px);
      .list_item {
        margin: 10px 0;
        padding: 24px 12px 12px;
        position: relative;
        .tag {
          border-radius: 4px;
          padding: 4px 8px;
          font-size: 10px;
          &.top_tag {
            border-radius: 0px 0px 4px 4px;
            position: absolute;
            font-size: 12px;
            top: 0;
            left: 12px;
          }
        }
        //待分配
        &.TagStatus1 {
          .tag {
            color: #f49b0a;
            background: rgb(255, 242, 226);
          }
        }
        //诊疗中
        &.TagStatus2 {
          .tag {
            color: #00bec5;
            background: rgb(229, 248, 248);
          }
        }
        //后送伤票
        &.TagStatus3 {
          .tag {
            color: #1064fb;
            background: rgb(221, 233, 255);
          }
        }
        .card_content {
          .handle_box,
          .info_box {
            margin-top: 10px;
            justify-content: space-between;
          }
          .handle_box {
            .text_overflow {
              max-width: 70%;
            }
          }
          .info_box {
            padding: 10px;
            border-radius: 6px;
            background: rgb(247, 248, 250);
            .label {
              color: #bcbfc8;
            }
          }
        }
      }
    }
  }
}
</style>
